<template>
  <div id="client">
    <div class="client-top">
      <h3>仓库</h3>
      <el-button type="primary" @click="dialogFormVisible = true"
        >新增</el-button
      >
      <el-button type="primary">导入</el-button>
      <el-button type="">导出</el-button>
    </div>
    <div class="client-content">
      <el-table
        height="500px"
        :data="pageInfo.list"
        border
        style="width: 100%; font-size: 13px"
      >
        <el-table-column prop="storeHomeCode" label="仓库编号" width="120">
        </el-table-column>
        <el-table-column prop="storeHomeName" label="仓库名称" width="120">
        </el-table-column>
        <el-table-column prop="employeeName" label="仓管" width="300">
        </el-table-column>
        <el-table-column label="是否启用" width="120">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#66b1ff"
              inactive-color="#c1c1c1"
              :active-value="1"
              :inactive-value="2"
              @change="handleStatusChange(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="de(scope.row.shId)" type="text" size="small"
              >删除</el-button
            >
            <el-button type="text" size="small"  @click="up(scope.row.shId)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      style="position: relative; left: 300px; bottom: 30px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.pageNum"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
    >
    </el-pagination>
    <el-dialog
      width="500px"
      top="20px"
      :title="shId?'修改仓库':'新增仓库'"
      :visible.sync="dialogFormVisible"
    >
      <AddStoreHome ref="addStoreHome"/>
      <div slot="footer" class="dialog-footer">
        <el-button @click="qu()">取 消</el-button>
        <el-button type="primary" 
          @click="sure()">确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import AddStoreHome from "./AddStoreHome.vue";

export default {
  name: "StoreHome",
  components: {
    AddStoreHome,
  },
  data() {
    return {
      pageInfo: [],
      dialogFormVisible: false,
      //分页参数
      currentPage4: 4,
      shId:'',
    };
  },
  methods: {
    qu(){
      this.$refs.addStoreHome.letNull();
      this.shId=''
      this.dialogFormVisible = false
    },
    async sure() {
      const flag = await this.$refs.addStoreHome.addAndUp();
      if (flag == true) {
        this.dialogFormVisible = false;
        this.findAll(this.pageInfo.pageNum, this.pageInfo.pageSize);
        this.shId=''
      }
    },
    up(id) {
      this.dialogFormVisible = true;
      this.shId=id
      this.$nextTick(() => {
        if (this.$refs.addStoreHome) {
          this.$refs.addStoreHome.selectById(id);
        }
      });
    },
    handleStatusChange(storeHouse) {
      const shId = storeHouse.shId;
      const status = storeHouse.status;

      this.axios({
        url: "/info/storeHouse/update",
        method: "POST",
        data: {
          shId,
          status,
        },
      }).then((rs) => {
        if (rs.data.code === 200) {
          this.findAll(this.pageInfo.pageNum, this.pageInfo.pageSize);
          this.$message({
            showClose: true,
            message: "改变状态成功",
            type: "success",
          });
        } else {
          this.$message({
            showClose: true,
            message: "改变状态失败",
            type: "error",
          });
        }
      });
    },
    de(shId) {
      this.$confirm("此操作将删除该部门, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.axios({
            url: "/info/storeHouse/update",
            method: "POST",
            data: {
              shId,
              status: 0,
            },
          }).then((rs) => {
            if (rs.data.code === 200) {
              this.findAll(this.pageInfo.pageNum, this.pageInfo.pageSize);
              this.$message({
                showClose: true,
                message: "删除成功",
                type: "success",
              });
            } else {
              this.$message({
                showClose: true,
                message: "删除失败",
                type: "error",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSizeChange(newSize) {
      console.log(`每页 ${newSize} 条`);
      this.findAll(1, newSize);
    },
    handleCurrentChange(newPage) {
      console.log(`当前页: ${newPage}`);
      this.findAll(newPage, this.pageInfo.pageSize);
    },
    findAll(pageNum, pageSize) {
      this.axios({
        url: "/info/storeHouse/findAll",
        params: {
          pageNum,
          pageSize,
        },
      }).then((rs) => {
        console.log(rs);
        this.pageInfo = rs.data.pageInfo;
      });
    },
  },
  created() {
    this.findAll(1, 100);
  },
};
</script>

<style scoped>
#client {
  width: 100%;
  height: 100%;
}

.client-top {
  width: calc(100% -20px);
  height: 60px;
  /* background-color: pink; */
  line-height: 60px;
  padding-left: 20px;
  font-size: 13px;
}

.client-top h3 {
  display: inline-block;
  margin-right: 1000px;
}

.client-content {
  width: 100%;
  height: calc(100% - 60px);
  /* background-color: skyblue; */
}

.el-input,
.el-button {
  font-size: 13px;
}
</style>